<template>
    <div :id="chartID" style ="width:100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts'
import { getUUID } from '../../utils/util';

export default {
    name:"chart_Line",
    data () {
        return {
            chartID: '',
        }
    },
    created(){
        this.chartID = getUUID();
    },
    computed: {
        echarts() {
            return 'echarts' + Math.random() * 10000
        },
    },
    props: {
        linedata: {
            type: Array,
            default: () => [],
        },
        linexAxis: {
            type: Array,
            default: () => [],
        },
        total: {
            type: Number,
            default: 0,
        },
        colorList: {
            type: Array,
            default: () => ["#EAEA26", "#FE5656", "#01E17E", "#00E9F0", "#FFAD05", "#1A54C7"],
        },
    },
    watch: {
        linedata:{
            handler(val,oval){
                this.linedata = val
                this.lineChart()
            },
            deep: true,
        },
        total:{
            handler(val,oval){
                this.total = val
                this.lineChart()
            },
            deep: true,
        },
        colorList: function(val, ov) {
            this.colorList = val
        },
    },
    mounted() {
        this.lineChart();
    },
    methods: {
        lineChart: function() {
            var AvailableWidth = window.innerWidth;
            var fontSize = AvailableWidth / 1080 * 9;
            var that = this
            const chartObj = echarts.init(document.getElementById(this.chartID));
            var option = {
                backgroundColor:"rgba(0,0,0,0)",
                color: this.colorList,
                title: {
                    text: '{name|' + '总数' + '}\n{val|' + this.total + '}',
                    top: 'center',
                    left: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: fontSize,
                                fontWeight: 'normal',
                                color: '#fff',
                                padding: [3, 0]
                            },
                            val: {
                                fontSize: fontSize*1.2,
                                fontWeight: 'bold',
                                color: '#fff',
                                padding: [3, 0]
                            }
                        }
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return '数量'+'<br/>'+params.marker+params.name+': '+params.value+'('+params.percent+'%)'
                    },
                },
                legend: {
                    show: false,
                },
                series: [
                    {
                        type: 'pie',
                        radius: ["40%", "75%"],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        labelLine: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data: [{
                            name: '',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: "#052652"
                                }
                            }
                        }]
                    }, 
                    {
                        type: 'pie',
                        radius: ["80%", "81%"],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        labelLine: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        name: "",
                        data: [{
                            name: '',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: "#052652"
                                }
                            }
                        }]
                    },
                    {
                        stack: 'a',
                        type: 'pie',
                        radius: ['40%', '65%'],
                        center: ['50%', '50%'],
                        // roseType: 'radius',
                        minAngle: 15,
                        zlevel: 10,
                        label: {
                            normal: {
                                show: true,
                                formatter: "{b}\n{c}({d}%)",
                                textStyle: {
                                    fontSize: fontSize * 0.8,
                                    // color: '#fff',
                                    lineHeight: fontSize
                                },
                                position: 'outside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: fontSize*1.1,
                                length2: fontSize*1
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                // shadowBlur: 13,
                                // shadowColor: '#fff',
                                // borderWidth: 5,
                                // borderColor: 'rgba(0, 0, 0, 1)',
                                // color: function(params) {
                                //     let obj = {
                                //         type: 'linear',
                                //         x: 0,
                                //         y: 0,
                                //         x2: 1,
                                //         y2: 1,
                                //         colorStops: [{
                                //             offset: 0, color: that.colorList[params.dataIndex]
                                //         }, {
                                //             offset: 1, color: '#ccc'
                                //         }],
                                //         global: false
                                //     }
                                //     return obj
                                // }
                            }
                        },
                        data: this.linedata
                    }
                ]
            };
            chartObj.setOption(option)
            window.onresize = function() {
                chartObj.resize()
            }
        },
    },
}
</script>

<style>
</style>
